<template>
    <div class="page-container">
        <!-- 缩放容器：承载所有内容，基于原9600*2240分辨率 -->
        <div class="scale-container">
            <!-- 顶部标题 -->
            <div class="headTitle">整车集成领域数字沙盘</div>
            <div class="headButton" @click="backHome"><span>返回首页</span></div>
            <div class="left1" @click="goToService('hot')"></div>
            <div class="right1" @click="goToService('intelligent')"></div>
            <!-- 左边内容 -->
            <div class="left">
                <div class="box">
                    <div class="headImg"></div>
                    <div class="title">整车集成测试领域/车身附件测试</div>
                    <div class="content">
                        <p class="contentTitle"><span style="top: 80px;
    left: 115px;
    position: absolute;
    width: 23px;
    height: 23px;
    background: #49B8FF;
    border-radius: 5px;"></span><span style="font-family: '微软雅黑粗体';color: #59ceff;">乘用车</span>前后端防护、顶部强度、侧门强度、牵引装置
                        </p>
                        <p class="contentTitle" style="margin-top: 10px;"><span style="top: 170px;
    left: 115px;
    position: absolute;
    width: 23px;
    height: 23px;
    background: #49B8FF;
    border-radius: 5px;"></span><span style="font-family: '微软雅黑粗体';color: #59ceff;">商用车</span>驾驶室强度、商用车前下防护、后下防护
                        </p>
                        <p class="contentTitle" style="    margin-top: -161px;
    margin-left: 1400px;"><span style="top: 85px;
    left: 1348px;
    position: absolute;
    width: 23px;
    height: 23px;
    background: #49B8FF;
    border-radius: 5px;"></span><span style="font-family: '微软雅黑粗体';color: #59ceff;">商用车</span>驾驶室强度、商用车前下防护、后下防护
                        </p>
                    </div>
                </div>
                <div class="box2">
                    <!-- 动态显示当前图片 -->
                    <img :src="currentImgLeft1" :alt="imgListLeft1[currentIndexLeft1].alt" class="img1"
                        :class="{ 'fade-in': isFadingLeft1 }">
                    <!-- 切换圆点容器 -->
                    <div class="dots">
                        <span class="dot" v-for="(item, index) in imgListLeft1" :key="index"
                            :class="{ active: currentIndexLeft1 === index }" @click="handleDotLeft1Click(index)"></span>
                    </div>
                    <span class="text">乘用车前后端防护</span>
                </div>
                <div class="box3">
                    <div class="img1"></div>
                    <span class="text">乘用车顶部强度</span>
                </div>
                <div class="box4">
                    <div class="img1"></div>
                    <span class="text">乘用车侧门强度</span>
                </div>
                <div class="box5">
                    <div class="img1"></div>
                    <span class="text">乘用车牵引装置</span>
                </div>
                <div class="box6">
                    <!-- <div class="img1"></div> -->
                    <!-- 动态显示当前图片 -->
                    <img :src="currentImgLeft2" :alt="imgListLeft2[currentIndexLeft2].alt" class="img1"
                        :class="{ 'fade-in': isFadingLeft2 }">
                    <!-- 切换圆点容器 -->
                    <div class="dots">
                        <span class="dot" v-for="(item, index) in imgListLeft2" :key="index"
                            :class="{ active: currentIndexLeft2 === index }" @click="handleDotLeft2Click(index)"></span>
                    </div>
                    <span class="text">商用车驾驶室强度</span>
                </div>
                <div class="box7">
                    <div class="img1"></div>
                    <span class="text">商用车前下防护</span>
                </div>
                <div class="box8">
                    <div class="img1"></div>
                    <span class="text">安全带固定点、儿童座椅固定点</span>
                </div>
            </div>
            <!-- 中间内容 -->
            <div class="middle">
                <div class="box">
                    <div class="headImg"></div>
                    <div class="title">整车集成测试领域/电磁兼容测试服务</div>
                    <div class="content">
                        <p class="contentTitle">
                            基于整车EMC暗室和零部件EMC暗室，开展整车整车辐射发射、整车传导发射、整车辐射抗扰、整车大电流注入、浪涌（冲击）抗扰等整车EMC试验及传导发射、辐射发射、浪涌抗扰度、瞬态传导抗扰、高压线束瞬态发射与脉冲干扰等零部件EMC试验。
                        </p>
                    </div>
                </div>
                <div class="box2">
                    <div class="img1"></div>
                    <span class="text">测试设备</span>
                    <span class="text2">整车EMC</span>
                    <div class="img2"></div>
                    <span class="text3">26.2m*19.3m*9m（ L*W*H） ， 具备整车十米法测试能力，底盘测功机采用AVL 方案， 转台直径12米， 可
                        以实现三轴25吨车辆测试；9k~18GHz电磁发射测试，10k~18GHz电磁抗扰测试；</span>
                    <div class="img3"></div>
                    <span class="text4">零部件EMC</span>
                    <span class="text5">BCI屏蔽室-1</span>
                    <span class="text6">7637屏蔽室-2</span>
                    <span class="text7">ESD屏蔽室-3</span>
                </div>
                <div class="box3">
                    <span class="text">测试服务</span>
                    <div class="img1"><span>法规测试：GB 34660，ECE R10.06、CISPR 12、GB/T 18387、GB/T 37130、GB 34660、ISO
                            11451-2、17675-2021 研发测试：加减速动态EMC测试、网联功能EMC测试、乘用车后方
                            交通穿行提示系统性能EMC测试、汽车智能限速系统性能EMC测试、乘用车车门开启预警系统性能EMC测试</span></div>
                    <div class="img2"><span>进行车辆各零部件的传导发射、辐射发射、浪涌抗扰度、磁场抗扰度、辐射抗扰度ALSE法、辐射抗扰度BCI法、辐射抗扰度带状线法等EMC测试。</span>
                    </div>
                </div>
            </div>
            <!-- 右边内容 -->
            <div class="right">
                <div class="box">
                    <div class="headImg"></div>
                    <div class="title">整车集成测试领域/整车集成测试</div>
                    <div class="content">
                        <p class="contentTitle">
                            主要承担产品准入、达标车型、CCC、环保中整车相关的强制性法规认证测试，并以此为支撑，聚焦底盘动态性能、可靠性、NVH等领域，为整车、各关键零部件企业提供性能对标、研发验证等解决方案，开展试验技术研究、试验设备开发等工作。
                        </p>
                    </div>
                </div>
                <div class="box2">
                    <div class="img1">
                        <!-- 动态显示当前图片 -->
                        <img :src="currentImg" :alt="imgList[currentIndex].alt" class="main-img"
                            :class="{ 'fade-in': isFading }">
                        <!-- 切换圆点容器 -->
                        <div class="dots">
                            <span class="dot" v-for="(item, index) in imgList" :key="index"
                                :class="{ active: currentIndex === index }" @click="handleDotClick(index)"></span>
                        </div>
                    </div>
                    <div class="text"><span class="text">电子稳定性（ESC）</span></div>
                    <div class="text"><span class="text">操纵稳定性</span></div>
                    <div class="text"><span class="text">爆胎应急安全装置</span></div>
                    <div class="text"><span class="text">制动及ABS等</span></div>
                </div>
                <div class="box3">
                    <div class="img1">
                        <!-- 动态显示当前图片 -->
                        <img :src="currentImg2" :alt="imgList2[currentIndex2].alt" class="main-img"
                            :class="{ 'fade-in': isFading2 }">
                        <!-- 切换圆点容器 -->
                        <div class="dots">
                            <span class="dot" v-for="(item, index) in imgList2" :key="index"
                                :class="{ active: currentIndex2 === index }" @click="handleDotClick2(index)"></span>
                        </div>
                    </div>
                    <div class="img2"><span class="text">强化腐蚀、路谱采集、可靠性试验</span></div>
                </div>
                <div class="box4">
                    <div class="img1">
                        <!-- 动态显示当前图片 -->
                        <img :src="currentImg3" :alt="imgList3[currentIndex3].alt" class="main-img"
                            :class="{ 'fade-in': isFading3 }">
                        <!-- 切换圆点容器 -->
                        <div class="dots">
                            <span class="dot" v-for="(item, index) in imgList3" :key="index"
                                :class="{ active: currentIndex3 === index }" @click="handleDotClick3(index)"></span>
                        </div>
                    </div>
                    <div class="text"><span class="text">NVH</span></div>
                    <div class="text"><span class="text">低速提示音</span></div>
                    <div class="text"><span class="text">车外行驶噪声</span></div>
                    <div class="text"><span class="text">车内噪声</span></div>
                </div>
                <div class="box5">
                    <span class="text">可靠性</span>
                    <span class="text2">强制性法规认证测试</span>
                    <span class="text3">产品准入</span>
                    <span class="text4">达标车型</span>
                    <span class="text5">CCC</span>
                    <span class="text6">环保</span>
                    <span class="text7">底盘动态性能</span>
                    <span class="text8">NVH</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
//路由
import { useRouter } from 'vue-router'
const router = useRouter()
//跳转路由
const goToService = (item) => {
    router.push({ name: item })
}
// 图片列表1
const imgList = ref([
    {
        url: "/imgs/ningbo/car/1-1.png",
        alt: "车辆测试图1"
    },
    {
        url: "/imgs/ningbo/car/1-2.png",
        alt: "车辆测试图2"
    },
    {
        url: "/imgs/ningbo/car/1-3.png",
        alt: "车辆测试图3"
    },
    {
        url: "/imgs/ningbo/car/1-4.png",
        alt: "车辆测试图3"
    }
]);
//左边图片列表1
const imgListLeft1 = ref([
    {
        url: "/imgs/ningbo/car/left1.png",
        alt: "车辆测试图1"
    },
    {
        url: "/imgs/ningbo/car/left2.png",
        alt: "车辆测试图2"
    }
]);
//左边切换动画1
const currentIndexLeft1 = ref(0); // 当前显示图片索引
const currentImgLeft1 = ref(imgListLeft1.value[0].url); // 当前显示图片路径
const isFadingLeft1 = ref(true); // 过渡动画状态
let timerLeft1 = null; // 自动切换定时器
// 切换到指定索引的图片
const switchToIndexLeft1 = (index) => {
    // 添加入场动画
    isFadingLeft1.value = false;
    // 等待动画结束后更新图片
    nextTick(() => {
        currentIndexLeft1.value = index;
        currentImgLeft1.value = imgListLeft1.value[index].url;
        isFadingLeft1.value = true;
    });
};
// 点击圆点切换图片
const handleDotLeft1Click = (index) => {
    if (index === currentIndexLeft1.value) return; // 点击当前圆点不触发
    switchToIndexLeft1(index);
    resetTimerLeft1(); // 重置自动切换定时器
};
// 切换到下一张图片
const nextImgLeft1 = () => {
    const nextIndex = (currentIndexLeft1.value + 1) % imgListLeft1.value.length;
    switchToIndexLeft1(nextIndex);
};
// 重置自动切换定时器
const resetTimerLeft1 = () => {
    if (timerLeft1) clearInterval(timerLeft1);
    timerLeft1 = setInterval(nextImgLeft1, 3000); // 3秒切换一次
};

//左边图片列表2
const imgListLeft2 = ref([
    {
        url: "/imgs/ningbo/car/left3.png",
        alt: "车辆测试图1"
    },
    {
        url: "/imgs/ningbo/car/left4.png",
        alt: "车辆测试图2"
    }, {
        url: "/imgs/ningbo/car/left5.png",
        alt: "车辆测试图3"
    },
    {
        url: "/imgs/ningbo/car/left6.png",
        alt: "车辆测试图4"
    }
]);
//左边切换动画1
const currentIndexLeft2 = ref(0); // 当前显示图片索引
const currentImgLeft2 = ref(imgListLeft2.value[0].url); // 当前显示图片路径
const isFadingLeft2 = ref(true); // 过渡动画状态
let timerLeft2 = null; // 自动切换定时器
// 切换到指定索引的图片
const switchToIndexLeft2 = (index) => {
    // 添加入场动画
    isFadingLeft2.value = false;
    // 等待动画结束后更新图片
    nextTick(() => {
        currentIndexLeft2.value = index;
        currentImgLeft2.value = imgListLeft2.value[index].url;
        isFadingLeft2.value = true;
    });
};
// 点击圆点切换图片
const handleDotLeft2Click = (index) => {
    if (index === currentIndexLeft2.value) return; // 点击当前圆点不触发
    switchToIndexLeft2(index);
    resetTimerLeft2(); // 重置自动切换定时器
};
// 切换到下一张图片
const nextImgLeft2 = () => {
    const nextIndex = (currentIndexLeft2.value + 1) % imgListLeft2.value.length;
    switchToIndexLeft2(nextIndex);
};
// 重置自动切换定时器
const resetTimerLeft2 = () => {
    if (timerLeft2) clearInterval(timerLeft2);
    timerLeft2 = setInterval(nextImgLeft2, 3000); // 3秒切换一次
};

// 状态管理1
const currentIndex = ref(0); // 当前显示图片索引
const currentImg = ref(imgList.value[0].url); // 当前显示图片路径
const isFading = ref(true); // 过渡动画状态
let timer = null; // 自动切换定时器
// 切换到指定索引的图片
const switchToIndex = (index) => {
    // 添加入场动画
    isFading.value = false;
    // 等待动画结束后更新图片
    nextTick(() => {
        currentIndex.value = index;
        currentImg.value = imgList.value[index].url;
        isFading.value = true;
    });
};
// 点击圆点切换图片
const handleDotClick = (index) => {
    if (index === currentIndex.value) return; // 点击当前圆点不触发
    switchToIndex(index);
    resetTimer(); // 重置自动切换定时器
};
// 切换到下一张图片
const nextImg = () => {
    const nextIndex = (currentIndex.value + 1) % imgList.value.length;
    switchToIndex(nextIndex);
};
// 重置自动切换定时器
const resetTimer = () => {
    if (timer) clearInterval(timer);
    timer = setInterval(nextImg, 3000); // 3秒切换一次
};

// 图片列表2（替换为你的实际图片路径）
const imgList2 = ref([
    {
        url: "/imgs/ningbo/car/2-1.png",
        alt: "车辆测试图1"
    },
    {
        url: "/imgs/ningbo/car/2-2.png",
        alt: "车辆测试图2"
    },
    {
        url: "/imgs/ningbo/car/2-3.png",
        alt: "车辆测试图3"
    },
    {
        url: "/imgs/ningbo/car/2-4.png",
        alt: "车辆测试图3"
    }
]);
// 状态管理1
const currentIndex2 = ref(0); // 当前显示图片索引
const currentImg2 = ref(imgList2.value[0].url); // 当前显示图片路径
const isFading2 = ref(true); // 过渡动画状态
let timer2 = null; // 自动切换定时器
// 切换到指定索引的图片
const switchToIndex2 = (index) => {
    // 添加入场动画
    isFading2.value = false;
    // 等待动画结束后更新图片
    nextTick(() => {
        currentIndex2.value = index;
        currentImg2.value = imgList2.value[index].url;
        isFading2.value = true;
    });
};
// 点击圆点切换图片
const handleDotClick2 = (index) => {
    if (index === currentIndex2.value) return; // 点击当前圆点不触发
    switchToIndex2(index);
    resetTimer2(); // 重置自动切换定时器
};
// 切换到下一张图片
const nextImg2 = () => {
    const nextIndex = (currentIndex2.value + 1) % imgList2.value.length;
    switchToIndex2(nextIndex);
};
// 重置自动切换定时器
const resetTimer2 = () => {
    if (timer2) clearInterval(timer2);
    timer2 = setInterval(nextImg2, 3000); // 3秒切换一次
};

// 图片列表3（替换为你的实际图片路径）
const imgList3 = ref([
    {
        url: "/imgs/ningbo/car/3-1.png",
        alt: "车辆测试图1"
    },
    {
        url: "/imgs/ningbo/car/3-2.png",
        alt: "车辆测试图2"
    },
    {
        url: "/imgs/ningbo/car/3-3.png",
        alt: "车辆测试图3"
    },
    {
        url: "/imgs/ningbo/car/3-4.png",
        alt: "车辆测试图3"
    }
]);
// 状态管理1
const currentIndex3 = ref(0); // 当前显示图片索引
const currentImg3 = ref(imgList3.value[0].url); // 当前显示图片路径
const isFading3 = ref(true); // 过渡动画状态
let timer3 = null; // 自动切换定时器
// 切换到指定索引的图片
const switchToIndex3 = (index) => {
    // 添加入场动画
    isFading3.value = false;
    // 等待动画结束后更新图片
    nextTick(() => {
        currentIndex3.value = index;
        currentImg3.value = imgList3.value[index].url;
        isFading3.value = true;
    });
};
// 点击圆点切换图片
const handleDotClick3 = (index) => {
    if (index === currentIndex3.value) return; // 点击当前圆点不触发
    switchToIndex3(index);
    resetTimer3(); // 重置自动切换定时器
};
// 切换到下一张图片
const nextImg3 = () => {
    const nextIndex = (currentIndex3.value + 1) % imgList3.value.length;
    switchToIndex3(nextIndex);
};
// 重置自动切换定时器
const resetTimer3 = () => {
    if (timer2) clearInterval(timer2);
    timer2 = setInterval(nextImg3, 3000); // 3秒切换一次
};
// 组件挂载时启动自动切换
onMounted(() => {
    resetTimer();
    resetTimer2();
    resetTimer3();
    resetTimerLeft1();
    resetTimerLeft2();
});
// 组件卸载时清除定时器
onUnmounted(() => {
    if (timer) clearInterval(timer);
    if (timer2) clearInterval(timer2);
    if (timer3) clearInterval(timer3);
    if (timerLeft1) clearInterval(timerLeft1);
    if (timerLeft2) clearInterval(timerLeft2);
});

//跳转路由
const backHome = () => {
    router.push({ name: 'ningbo' })
}
</script>
<style scoped>
.left1 {
    z-index: 999;
    cursor: pointer;
    top: 45%;
    left: 10px;
    position: absolute;
    width: 94px;
    height: 258px;
    background-image: url("/imgs/home/left1.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.right1 {
    z-index: 999;
    cursor: pointer;
    position: absolute;
    top: 45%;
    right: 10px;
    width: 94px;
    height: 258px;
    background-image: url("/imgs/home/right1.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* 可视区域容器：固定为目标分辨率6240*1456 */
.page-container {
    width: 6240px;
    /* 新目标宽度 */
    height: 1456px;
    /* 新目标高度 */
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

/* 原始设计稿容器：基于9600*2240，通过缩放适配新分辨率 */
.scale-container {
    width: 9600px;
    /* 原始宽度不变 */
    height: 2240px;
    /* 原始高度不变 */
    transform: scale(0.65);
    /* 新缩放比：6240/9600=0.65，1456/2240=0.65（宽高比完全一致） */
    transform-origin: 0 0;
    /* 保持左上角为缩放原点，避免位置偏移 */
    position: relative;
}

.headTitle {
    text-align: center;
    position: relative;
    top: -24px;
    font-size: 130px;
    /* left: 40.5%; */
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #FFFFFF;
    background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.headButton {
    cursor: pointer;
    display: flex;
    float: inline-end;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 78px;
    height: 78px;
    background-image: url("/imgs/ningbo/cancel.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.left {
    display: flex;

    .box {
        margin-left: 73px;
        display: flex;
        width: 1372px;
        height: 168px;
        background-image: url("/imgs/ningbo/t(1).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .headImg {
            margin-left: 220px;
            margin-top: 41px;
            width: 53px;
            height: 58px;
            background-image: url("/imgs/ningbo/菱形 拷贝.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .title {
            margin-left: 30px;
            margin-top: 22px;
            height: 49px;
            font-family: PangMenZhengDao;
            font-weight: 400;
            font-size: 57px;
            color: #FFFFFF;
        }

        .content {
            position: absolute;
            top: 402px;
            left: 160px;
            width: 2985px;
            height: 295px;
            background-image: url("/imgs/ningbo/discharge/矩形 933 拷贝 3.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .contentTitle {
                width: 94%;
                margin-top: 60px;
                margin-left: 160px;
                font-family: "微软雅黑常规";
                font-size: 47px;
                color: #FFFFFF;
            }
        }
    }

    .box2 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 183px;
        top: 722px;
        display: flex;
        width: 700px;
        height: 611px;
        background-image: url("/imgs/ningbo/car/矩形 937 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .img1 {
            width: 633px;
            height: 425px;
            background-image: url("/imgs/ningbo/car/图片2.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

        }

        .dots {
            position: absolute;
            top: 69%;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 22px;
        }

        .dot {
            cursor: pointer;
            /* 圆点基础样式 */
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background-color: #919FA7;
            /* 未激活状态 */
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .dot.active {
            /* 激活状态的圆点 */
            background-color: #70C3F5;
            /* 蓝色激活色 */
            box-shadow: 0 0 10px #70C3F5;
            /* 发光效果 */
            transform: scale(1.2);
            /* 轻微放大 */
        }

        .text {
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 39px;
            color: #FFFFFF;
        }

    }

    .box3 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 923px;
        top: 722px;
        display: flex;
        width: 700px;
        height: 611px;
        background-image: url("/imgs/ningbo/car/矩形 937 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .img1 {
            width: 633px;
            height: 425px;
            background-image: url("/imgs/ningbo/car/图片3.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

        }

        .text {
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 39px;
            color: #FFFFFF;
        }
    }

    .box4 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 1663px;
        top: 722px;
        display: flex;
        width: 700px;
        height: 611px;
        background-image: url("/imgs/ningbo/car/矩形 937 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .img1 {
            width: 633px;
            height: 425px;
            background-image: url("/imgs/ningbo/car/图片4.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

        }

        .text {
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 39px;
            color: #FFFFFF;
        }
    }

    .box5 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 2413px;
        top: 722px;
        display: flex;
        width: 700px;
        height: 611px;
        background-image: url("/imgs/ningbo/car/矩形 937 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .img1 {
            width: 633px;
            height: 425px;
            background-image: url("/imgs/ningbo/car/图片5.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

        }

        .text {
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 39px;
            color: #FFFFFF;
        }
    }

    .box6 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 183px;
        top: 1382px;
        display: flex;
        width: 1088px;
        height: 672px;
        background-image: url("/imgs/ningbo/car/矩形 937 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .dots {
            position: absolute;
            top: 69%;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 22px;
        }

        .dot {
            cursor: pointer;
            /* 圆点基础样式 */
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background-color: #919FA7;
            /* 未激活状态 */
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .dot.active {
            /* 激活状态的圆点 */
            background-color: #70C3F5;
            /* 蓝色激活色 */
            box-shadow: 0 0 10px #70C3F5;
            /* 发光效果 */
            transform: scale(1.2);
            /* 轻微放大 */
        }

        .img1 {
            width: 1021px;
            height: 486px;
            background-image: url("/imgs/ningbo/car/图片9.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

        }

        .text {
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 39px;
            color: #FFFFFF;
        }
    }

    .box7 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 1310px;
        top: 1382px;
        display: flex;
        width: 879px;
        height: 672px;
        background-image: url("/imgs/ningbo/car/矩形 937 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .img1 {
            width: 812px;
            height: 486px;
            background-image: url("/imgs/ningbo/car/图片10.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

        }

        .text {
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 39px;
            color: #FFFFFF;
        }
    }

    .box8 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 2231px;
        top: 1382px;
        display: flex;
        width: 879px;
        height: 672px;
        background-image: url("/imgs/ningbo/car/矩形 937 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .img1 {
            width: 812px;
            height: 486px;
            background-image: url("/imgs/ningbo/car/图片11.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

        }

        .text {
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 39px;
            color: #FFFFFF;
        }
    }
}

.middle {
    display: flex;
    position: absolute;
    left: 3109px;
    top: 202px;

    .box {
        margin-left: 73px;
        display: flex;
        width: 1372px;
        height: 168px;
        background-image: url("/imgs/ningbo/t(1).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .headImg {
            margin-left: 220px;
            margin-top: 41px;
            width: 53px;
            height: 58px;
            background-image: url("/imgs/ningbo/菱形 拷贝.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .title {
            margin-left: 30px;
            margin-top: 22px;
            height: 49px;
            font-family: PangMenZhengDao;
            font-weight: 400;
            font-size: 57px;
            color: #FFFFFF;
        }

        .content {
            position: absolute;
            top: 202px;
            left: 160px;
            width: 2985px;
            height: 295px;
            background-image: url("/imgs/ningbo/discharge/矩形 933 拷贝 3.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .contentTitle {
                width: 94%;
                margin-top: 60px;
                margin-left: 100px;
                font-family: "微软雅黑常规";
                font-size: 47px;
                color: #FFFFFF;
            }
        }
    }

    .box2 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 183px;
        top: 520px;
        display: flex;
        width: 2198px;
        height: 1334px;
        background-image: url("/imgs/ningbo/car/矩形 937 拷贝(4).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .img1 {
            position: relative;
            top: 170px;
            /* left: 50px; */
            width: 2096px;
            height: 427px;
            background-image: url("/imgs/ningbo/car/组 7790 拷贝 2.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

        }

        .img2 {
            position: relative;
            top: 187px;
            /* left: 50px; */
            width: 2096px;
            height: 117px;
            background-image: url("/imgs/ningbo/car/矩形 937 拷贝(2).png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .img3 {
            position: relative;
            top: 100px;
            /* left: 50px; */
            width: 2104px;
            height: 515px;
            background-image: url("/imgs/ningbo/car/组 7816 拷贝 3.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .text {
            position: absolute;
            top: 70px;
            font-family: FZLanTingHeiS-B-GB;
            font-weight: 400;
            font-size: 56px;
            color: #FFFFFF;
            line-height: 47px;
        }

        .text2 {
            position: absolute;
            top: 340px;
            left: 68px;
            writing-mode: vertical-rl;
            font-family: "微软雅黑常规";

            font-weight: 400;
            font-size: 47px;
            color: #FFFFFF;
            line-height: 66px;
        }

        .text3 {
            position: relative;
            top: 81px;
            width: 1985px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 31px;
            color: #FFFFFF;
            left: 80px;
        }

        .text4 {
            writing-mode: vertical-rl;
            top: 927px;
            left: 70px;
            position: absolute;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 39px;
            color: #FFFFFF;
        }

        .text5 {
            position: absolute;
            top: 780px;
            left: 370px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 39px;
            color: #FFFFFF;
        }

        .text6 {
            position: relative;
            top: -410px;
            left: 53px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 39px;
            color: #FFFFFF;
        }

        .text7 {
            top: -480px;
            left: 728px;
            position: relative;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 39px;
            color: #FFFFFF;
        }

    }

    .box3 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 2423px;
        top: 520px;
        display: flex;
        width: 726px;
        height: 1334px;
        background-image: url("/imgs/ningbo/car/矩形 937 拷贝(5).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .img1 {
            display: flex;
            width: 635px;
            height: 618px;
            background-image: url("/imgs/ningbo/car/矩形 937 拷贝 7.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            span {
                padding: 35px;
                width: 573px;
                font-family: "微软雅黑常规";
                font-weight: 400;
                font-size: 35px;
                color: #FFFFFF;
                line-height: 50px;
            }
        }

        .img2 {
            display: flex;
            width: 635px;
            height: 472px;
            background-image: url("/imgs/ningbo/car/矩形 937 拷贝 7.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            span {
                padding: 35px;
                width: 567px;
                font-family: "微软雅黑常规";
                font-weight: 400;
                font-size: 35px;
                color: #FFFFFF;
                line-height: 50px;
            }
        }

        .text {
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 39px;
            color: #FFFFFF;
        }
    }
}

.right {
    display: flex;
    position: absolute;
    flex-direction: column;
    left: 6270px;
    top: 200px;
    display: flex;

    .box {
        margin-left: 73px;
        display: flex;
        width: 1372px;
        height: 168px;
        background-image: url("/imgs/ningbo/t(1).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .headImg {
            margin-left: 220px;
            margin-top: 41px;
            width: 53px;
            height: 58px;
            background-image: url("/imgs/ningbo/菱形 拷贝.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .title {
            margin-left: 30px;
            margin-top: 22px;
            height: 49px;
            font-family: PangMenZhengDao;
            font-weight: 400;
            font-size: 57px;
            color: #FFFFFF;
        }

        .content {
            position: absolute;
            top: 202px;
            left: 160px;
            width: 2985px;
            height: 261px;
            background-image: url("/imgs/ningbo/discharge/矩形 933 拷贝 3.png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .contentTitle {
                width: 94%;
                margin-top: 60px;
                margin-left: 100px;
                font-family: "微软雅黑常规";
                font-size: 47px;
                color: #FFFFFF;
            }
        }
    }

    .box2 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 183px;
        top: 520px;
        display: flex;
        width: 950px;
        height: 1121px;
        background-image: url("/imgs/ningbo/car/矩形 937.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .img1 {
            width: 881px;
            height: 427px;
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .main-img {
                /* 图片样式 */
                width: 100%;
                height: 100%;
                object-fit: cover;
                /* 保持图片比例填充容器 */
                transition: opacity 0.5s ease;
                /* 淡入淡出过渡 */
            }

            /* 图片切换动画 */
            .fade-in {
                opacity: 1;
            }

            .main-img:not(.fade-in) {
                opacity: 0;
            }

            .dots {
                position: absolute;
                top: 39%;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                gap: 22px;
            }

            .dot {
                cursor: pointer;
                /* 圆点基础样式 */
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background-color: #919FA7;
                /* 未激活状态 */
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .dot.active {
                /* 激活状态的圆点 */
                background-color: #70C3F5;
                /* 蓝色激活色 */
                box-shadow: 0 0 10px #70C3F5;
                /* 发光效果 */
                transform: scale(1.2);
                /* 轻微放大 */
            }
        }

        .text {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 881px;
            height: 90px;
            background-image: url("/imgs/ningbo/car/矩形 937 拷贝(2).png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .text {
                font-family: "微软雅黑常规";
                font-weight: 400;
                font-size: 56px;
                color: #FFFFFF;
                line-height: 47px;
            }
        }
    }

    .box3 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 1183px;
        top: 520px;
        display: flex;
        width: 950px;
        height: 793px;
        background-image: url("/imgs/ningbo/car/组 7822.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .img1 {
            width: 881px;
            height: 427px;
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            /* background-image: url("/imgs/ningbo/car/图片2.png"); */
            .main-img {
                /* 图片样式 */
                width: 100%;
                height: 100%;
                object-fit: cover;
                /* 保持图片比例填充容器 */
                transition: opacity 0.5s ease;
                /* 淡入淡出过渡 */
            }

            /* 图片切换动画 */
            .fade-in {
                opacity: 1;
            }

            .main-img:not(.fade-in) {
                opacity: 0;
            }

            .dots {
                position: absolute;
                top: 58%;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                gap: 22px;
            }

            .dot {
                /* 圆点基础样式 */
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background-color: #919FA7;
                /* 未激活状态 */
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .dot.active {
                /* 激活状态的圆点 */
                background-color: #70C3F5;
                /* 蓝色激活色 */
                box-shadow: 0 0 10px #70C3F5;
                /* 发光效果 */
                transform: scale(1.2);
                /* 轻微放大 */
            }

            /* 功能按钮样式（保持原有设计） */
            .img2 {
                width: 800px;
                height: 65px;
                margin-top: 18px;
                padding: 0 20px;
                background-color: #0a4da2;
                border-radius: 6px;
                border: 1px solid #1366d9;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.2s;
            }

            .img2:hover {
                background-color: #0f57b8;
                border-color: #1a73e8;
            }

            .text {
                color: #ffffff;
                font-size: 20px;
                font-weight: 500;
            }

        }

        .img2 {
            display: flex;
            justify-content: center;
            align-items: end;
            width: 881px;
            height: 90px;
            background-image: url("/imgs/ningbo/car/矩形 937 拷贝(2).png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .text {
                font-family: "微软雅黑常规";
                font-weight: 400;
                font-size: 56px;
                color: #FFFFFF;
                line-height: 47px;
            }
        }
    }

    .box4 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 2183px;
        top: 520px;
        display: flex;
        width: 950px;
        height: 1121px;
        background-image: url("/imgs/ningbo/car/矩形 937.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .img1 {
            width: 881px;
            height: 427px;
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .main-img {
                /* 图片样式 */
                width: 100%;
                height: 100%;
                object-fit: cover;
                /* 保持图片比例填充容器 */
                transition: opacity 0.5s ease;
                /* 淡入淡出过渡 */
            }

            /* 图片切换动画 */
            .fade-in {
                opacity: 1;
            }

            .main-img:not(.fade-in) {
                opacity: 0;
            }

            .dots {
                position: absolute;
                top: 39%;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                gap: 22px;
            }

            .dot {
                /* 圆点基础样式 */
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background-color: #919FA7;
                /* 未激活状态 */
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .dot.active {
                /* 激活状态的圆点 */
                background-color: #70C3F5;
                /* 蓝色激活色 */
                box-shadow: 0 0 10px #70C3F5;
                /* 发光效果 */
                transform: scale(1.2);
                /* 轻微放大 */
            }
        }

        .text {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 881px;
            height: 90px;
            background-image: url("/imgs/ningbo/car/矩形 937 拷贝(2).png");
            background-position: left;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .text {
                font-family: "微软雅黑常规";
                font-weight: 400;
                font-size: 56px;
                color: #FFFFFF;
                line-height: 47px;
            }
        }
    }

    .box5 {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        position: absolute;
        left: 383px;
        top: 1372px;
        display: flex;
        width: 2595px;
        height: 495px;
        background-image: url("/imgs/ningbo/car/组 7823.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .text {
            position: relative;
            font-family: "微软雅黑粗体";
            font-weight: 400;
            font-size: 56px;
            color: #FFFFFF;
            line-height: 47px;
            top: 20px;
        }

        .text2 {
            position: relative;
            top: 80px;
            font-family: "微软雅黑粗体";
            font-weight: 400;
            color: #FFFFFF;

            font-size: 53px;
            color: #49B8FF;
            line-height: 67px;
        }

        .text3 {
            position: relative;
            top: 120px;
            left: -210px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 56px;
            color: #FFFFFF;
            line-height: 47px;
        }

        .text4 {
            position: relative;
            top: 60px;
            left: 200px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 56px;
            color: #FFFFFF;
            line-height: 47px;
        }

        .text5 {
            position: relative;
            top: 120px;
            left: -230px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 56px;
            color: #FFFFFF;
            line-height: 47px;
        }

        .text6 {
            position: relative;
            top: 60px;
            left: 230px;
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 56px;
            color: #FFFFFF;
            line-height: 47px;
        }

        .text7 {
            position: relative;
            top: 20px;
            left: -870px;
            font-family: "微软雅黑粗体";
            font-weight: 400;
            font-size: 56px;
            color: #FFFFFF;
            line-height: 47px;
        }

        .text8 {
            position: relative;
            top: -40px;
            left: 870px;
            font-family: "微软雅黑粗体";
            font-weight: 400;
            font-size: 56px;
            color: #FFFFFF;
            line-height: 47px;
        }
    }
}
</style>